<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人微圈</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1030px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 100px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 90px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 30px;
        }
        .layui-form-label{
            width: 105px;
            padding-left: 100px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 200px;
            margin-right: 10px;
        }
        .record{
            width: 1650px;
            height: 821px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }

        #button_ids{
            display: none;
        }

        .record-right{
            width: 1650px;
            height: 700px;
            float: left;
        }

        .layui-table-cell>a{
            color:green;
        }
        img{
            width: 100px;
            height: 116px;
        }
    </style>
</head>
<body>
<div class="box">
    <!--商品列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">微圈列表</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>
    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询

                </div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="layForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="artcleTitle" id="artcleTitle" required lay-verify="required" placeholder="请输入文章名称" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">创建时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDate" id="createDate" required lay-verify="createDate" placeholder="请输入文章名称" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">发布时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="releaseDate" id="releaseDate" required lay-verify="releaseDate" placeholder="文章发布时间" autocomplete="off" class="layui-input">
                                <input type="hidden" name="userId" id="userId" required lay-verify="userId" autocomplete="off" class="layui-input">
                            </div>
                            <span>
                                <button type="reset" class="layui-btn layui-btn-warm query-top-right">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                                <div class="query-top-right layui-btn" onclick="search()"><i class="layui-icon layui-icon-search"></i>搜索</div>
                                <!-- layui自带的重置功能 -->
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">
        <div class="record-right">
            <!--表-->
            <table id="demoTable" lay-filter="demoTable"></table>
        </div>
    </div>
    <!--表头样式-->
    <div id="button_ids">
        <i class="layui-icon layui-icon-align-left"></i> 数据列表

    </div>
    <!--表内操作-->
    <div id="btnOperation" style="display:none" >
        <a alt="查看" title="查看"  lay-event="selectTable">查看</a>
        <a alt="删除" title="删除"  lay-event="updateTable">删除</a>
    </div>

    <div hidden>
        <input type="text" class="acticleCategroyId"/>
        <input type="text" class="childNode"/>
        <!-- 返回 -->
        <p id="title" style="display: none;">微圈列表</p>
    </div>

</div>
</body>
    <script>
        layui.use(["jquery","laydate","layer","form","table"],function () {

            var
                $ = layui.jquery,
                laydate=layui.laydate,
                layer = layui.layer,
                table = layui.table,
                form = layui.form;
            laydate.render({
                elem:"#releaseDate",
                type:'datetime'
            })
            var userId = JSON.parse(localStorage.getItem("user")).data.userId;
            AllJsMicrocircle();
            function AllJsMicrocircle(){
                var layForm = {
                    "userId":userId,
                    "artcleTitle":"",
                    "releaseDate":"",
                    "createDate":""
                };
                $.ajax({
                    url:"/JsMicrocircle/getByIdAllJsMicrocircle",
                    data:layForm,
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        demoTable(data.data);
                    }
                })
            }
            search = function search(){
                $("#userId").val(userId);
                var layForm = form.val("layForm");
                console.log(layForm);
                $.ajax({
                    url:"/JsMicrocircle/getByIdAllJsMicrocircle",
                    data:layForm,
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        console.log(data);
                        demoTable(data.data);
                    }
                })
            }




            /*表格*/
            function demoTable(data){
                table.render({
                    elem:'#demoTable',
                    title:"个人微圈",
                    data:data,
                    toolbar:'#button_ids',
                    limit:10,
                    width:1650,
                    page:{
                        layout:['count','prev','page','next','limit','skip','refresh'],
                        limits:[10,20,30],
                        first:"首页",
                        last:"尾页",
                    },
                    cols:[[
                        {type:'checkbox'},
                        {field:"",title:"序号",align:'center',width:80,templet:function (data) {
                                return data.LAY_INDEX;
                            }},
                        {field:"userName",title:"用户昵称",align:'center'},
                        {field:"artcleTitle",title:"文章标题",align:'center'},
                        {field:"createDate",title:"创建时间",align:'center'},
                        {field:"account",title:"用户账号",align:'center'},
                        {field:"details",title:"审核状态",align:'center',templet:function (data) {
                            if (data.details == 3) {
                                return "已通过";
                            }else if(data.details == 2){
                                return "草稿";
                            }else if(data.details == 5){
                                return "待审核";
                            }
                        }},
                        {field:"releaseDate",title:"发布时间",align:'center'},
                        {field:"createDate",title:"创建时间",align:'center'},
                        {field:"show",title:"显示状态",align:'center',templet:function (data) {
                                if(data.show == 2){
                                    return "显示";
                                }else if(data.show == 3){
                                    return "已删除";
                                }
                            }},
                        {field:'',title:"操作",align:'center',toolbar:"#btnOperation"}
                    ]]
                });

                table.on("tool(demoTable)",function (obj) {
                    if (obj.event == "selectTable"){
                        localStorage.setItem("commentMicrocircle",JSON.stringify(obj.data));
                        layer.open({
                            type:2,
                            title:'微圈管理',
                            area:['95%','100%'],
                            scrollbar: false,
                            offset:'auto',
                            btn:["确定","取消"],
                            content:"../list/Administration-microCircle.html",
                            success:function (layero, index) {

                                var data = layero.find('iframe').contents();
                                data.find("#userName").text(obj.data.userName);
                                data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                                data.find("th[name=userName]").text(obj.data.userName);
                                data.find("th[name=artcleCategroyName]").text(obj.data.artcleCategroyName);
                                data.find("th[name=releaseDate]").text(obj.data.releaseDate);
                                data.find("th[name=account]").text(obj.data.account);
                                data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                                data.find("th[name=article]").html(obj.data.article);
                                localStorage.setItem("artcleUrl",obj.data.artcleUrl);
                                data.find("th[name=acticleHits]").text(obj.data.acticleHits);
                                data.find("th[name=acticleLike]").text(obj.data.acticleLike);
                                data.find("th[name=acticleReviews]").text(obj.data.acticleReviews);
                                data.find("th[name=acticleShare]").text(obj.data.acticleShare);
                                var user = localStorage.getItem("user");
                                localStorage.setItem("userAcatarUrl",obj.data.userAcatarUrl);
                                user = JSON.parse(user);
                                data.find("input[name=trueName]").val(user.data.trueName);
                                data.find("input[name=account]").val(user.data.account);
                                data.find("input[name=userId]").val(user.data.userId);
                                //评论
                                data.find("input[name=acticleHits]").val(obj.data.acticleHits);
                                data.find("input[name=acticleLike]").val(obj.data.acticleLike);
                                data.find("input[name=acticleReviews]").val(obj.data.acticleReviews);
                                data.find("input[name=acticleShare]").val(obj.data.acticleShare);
                            },
                            yes:function (index, layero) {
                                layer.close(index);
                            },
                            but2:function (index, layero) {
                                layer.close(index);
                            }
                        })

                    } else{
                        if(obj.data.show == 3){
                            layer.msg("不可再次删除");
                        }else{
                            layer.confirm('确定删除当前文章吗?', {icon: 3, title:'删除'}, function(index){
                                $.ajax({
                                    url:"/JsMicrocircle/deleteByIdJsMicrocircle",
                                    data:{"microcircleId":obj.data.microcircleId},
                                    type:'post',
                                    dataType:'json',
                                    success:function (data) {
                                        if (data.data == true) {
                                            //向操作日志列表添加一条数据

                                            layer.msg("删除成功");
                                            AllJsMicrocircle();

                                        }else{
                                            layer.msg("删除失败");
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        }



                    }
                });
                //返回
                $('#goBack').click(function () {
                    var title = $('#title').text();
                    var iframe = parent.$('.iframe');
                    $.each(iframe,function (i,item) {
                        if(title == $(item).attr('_href')){
                            parent.$('#beforeHref').val($(item).attr('_href'));
                            parent.beforeHref();
                            return;
                        }
                    });
                });
                //刷新
                $("#refresh").click(function () {
                    $("#artcleTitle").val("");
                    $("#releaseDate").val("");
                    AllJsMicrocircle();
                });

            }
        })
    </script>
</html>